<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8"/>
<title>DynamicBar demo</title>

<!-- 必要文件：jquery -->
<script src="/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- 动态图表文件(可选)：sockjs必须要放在echarts.min.js上面、jquery-1.8.3.min.js下面,防止JS冲突 -->
<script src="/sockjs/sockjs-1.1.1.min.js" type="text/javascript"></script>
<script src="/stomp/stomp.min.js" type="text/javascript"></script>
<!-- 必要文件：echarts -->
<script src="/echarts/echarts.min.js"></script>
<!-- ECharts主题(可选，默认为macarons) -->
<script src="/echarts/theme/dark.js"></script>
<script src="/echarts/theme/infographic.js"></script>
<script src="/echarts/theme/macarons.js"></script>
<script src="/echarts/theme/roma.js"></script>
<script src="/echarts/theme/shine.js"></script>
<script src="/echarts/theme/vintage.js"></script>
<!-- 必要文件：echarts.ajax自定义封装 -->
<script src="/echarts/echarts.ajax.js"></script>
<!-- 必要文件：ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 460px;
    width: 99%;
    overflow: hidden;
    padding : 10px;
    margin: 10px auto;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

</head>
<body>
1)基础图表：<br/>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="demo-dynamic-thread-pool-executor"
	class="echarts"
	echarts-type="line"
	echarts-title="threadPoolExecutor"
	echarts-theme="macarons"
	echarts-x-axis-name="时间"
	echarts-y-axis-name="数量"
	echarts-url="/echarts/showInitThreadPoolInfo"
	echarts-socket="/topic/showRealTimeThreadPoolInfo/data"
></div>

<h1>线程信息：</h1>
当前线程池中正在执行任务的线程数量：<span id="activeCountRealTime"></span><br/>

已完成的任务数量：<span id="completedTaskCountRealTime"></span><br/>

线程池已执行和未执行的任务总数：<span id="taskCountRealTime"></span><br/>

线程池当前的线程数量：<span id="poolSizeRealTime"></span><br/>

队列中等待执行的任务数目:<span id="queueSizeRealTime"></span><br/>

corePoolSize:<span id="corePoolSizeRealTime"></span><br/>

maximumPoolSize:<span id="maximumPoolSizeRealTime"></span><br/>

<h1>线程测试参数：</h1>
corePoolSize:
<input type="text" name="corePoolSize" id="corePoolSize" value="10"/><br/>

maximumPoolSize:
<input type="text" name="maximumPoolSize" id="maximumPoolSize" value="20"/><br/>

<button id="poolSize">提交</button><span id="poolSizeInfo"></span><br/>

handlerTasksNum:
<input type="text" name="handlerTasksNum" id="handlerTasksNum" value="200"/><br/>
<button id="handlerTask">提交</button><span id="handlerTaskInfo"></span><br/>

allowCoreThreadTimeOut:
<input type="radio" name="allowCoreThreadTimeOut" value="true"/>true
<input type="radio" name="allowCoreThreadTimeOut" value="false" checked="checked"/>false<br/>
<button id="allowCoreThreadTimeOut">提交</button><span id="allowCoreThreadTimeOutInfo"></span>

<script type="text/javascript">
    $("#allowCoreThreadTimeOut").click(allowCoreThreadTimeOut);
    function allowCoreThreadTimeOut(){
        var allowCoreThreadTimeOut = $("input[name='allowCoreThreadTimeOut']:checked").val();
        jQuery.ajax({
            type : "POST",
            url : "/echarts/allowCoreThreadTimeOut",
            data : {'allowCoreThreadTimeOut':allowCoreThreadTimeOut},
            dataType : 'text',
            success : function(message, tst, jqXHR) {
                if(message=='success'){
                    $("#allowCoreThreadTimeOutInfo").html("设置成功：allowCoreThreadTimeOut---"+allowCoreThreadTimeOut);
                }
            }
        });
    }

	$("#poolSize").click(poolSize);
	function poolSize(){
		var corePoolSize = $("#corePoolSize").val();
		var maximumPoolSize = $("#maximumPoolSize").val();
		jQuery.ajax({
			type : "POST",
			url : "/echarts/threadPoolSize",
			data : {'corePoolSize':corePoolSize,'maximumPoolSize':maximumPoolSize},
			dataType : 'text',
			success : function(message, tst, jqXHR) {
				if(message=='success'){
					$("#poolSizeInfo").html("设置成功：corePoolSize---"+corePoolSize+"；maximumPoolSize---"+maximumPoolSize);
				}
			}
		});
	}

	$("#handlerTask").click(handlerTasksNum);
	function handlerTasksNum(){
		var handlerTasksNum = $("#handlerTasksNum").val();
		jQuery.ajax({
			type : "POST",
			url : "/echarts/handlerthreadPool",
			data : {'handlerTasksNum':handlerTasksNum},
			dataType : 'text',
			success : function(message, tst, jqXHR) {
				if(message=='success'){
					$("#handlerTaskInfo").html("设置成功：handlerTasksNum---"+handlerTasksNum);
				}
			}
		});
	}
	$(document).ready(function() {
		var stompClient = null;
		var socket = new SockJS('/echarts-websocket');
		stompClient = Stomp.over(socket);
		stompClient.debug = null;
		stompClient.connect({}, function (frame) {
			//setConnected(true);
			stompClient.subscribe("/topic/showRealTimeThreadPoolInfo/data", function (socketData) {
				var jsonObj = JSON.parse(socketData.body);
				$("#taskCountRealTime").html(jsonObj['taskCount']);
				$("#completedTaskCountRealTime").html(jsonObj['completedTaskCount']);
				$("#poolSizeRealTime").html(jsonObj['poolSize']);
				$("#activeCountRealTime").html(jsonObj['activeCount']);
				$("#corePoolSizeRealTime").html(jsonObj['corePoolSize']);
				$("#maximumPoolSizeRealTime").html(jsonObj['maximumPoolSize']);
                $("#queueSizeRealTime").html(jsonObj['queueSize']);
			});
		});
	});
</script>

</body>
</html>